<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/wechat.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/swiper-3.4.2.min.css">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta charset="UTF-8">
    <title>微信小场景</title>
</head>
<body>
    <header>
        <div class="audio" id="audio"></div>
        <div id="text" class="text"></div>
        <audio src="audio/4301e31a-5022-4210-a96d-d36bda672c30.mp3" loop="loop" autoplay="autoplay" id="music"></audio>
    </header>
    <div class="content">
        <div class="one swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="page1">
                        <img src="img/bg2.png" alt="" class="p11 ani" swiper-animate-effect=" bounceInDown" swiper-animate-duration="4s" swiper-animate-delay="0.5s"/>
                        <img src="img/text1.png" alt="" class="ani p12" swiper-animate-effect="bounceInUp" swiper-animate-duration="3s" swiper-animate-delay="0.5s"/>
                        <img src="img/text2.png" alt="" class="ani p13" swiper-animate-effect="bounceInUp" swiper-animate-duration="3s" swiper-animate-delay="1s"/>
                        <img src="img/text3.png" alt="" class="ani p14" swiper-animate-effect="bounceInUp" swiper-animate-duration="3s" swiper-animate-delay="1.5s"/>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page2">
                        <img src="img/text4.png" alt="" class="ani p21" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="1s"/>
                        <img src="img/bg1.gif" alt="" class="p22 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="1.5s">
                        <img src="img/head1.png" alt="" class="p23 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="2s">
                        <img src="img/htext1.png" alt="" class="p24 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="2.5s">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page3">
                        <img src="img/text5.png" alt="" class="p31 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="1s">
                        <img src="img/bg2.gif" alt="" class="p32 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="1.5s">
                        <img src="img/htext2.png" alt="" class="p33 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="2s">
                        <img src="img/head2.png" alt="" class="p34 ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="2.5s">
                        <img src="img/head1.png" alt="" class="p35 ani" swiper-animate-effect="rotateIn" swiper-animate-duration="2s" swiper-animate-delay="3s">
                        <img src="img/htext3.png" alt="" class="p36 ani" swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="2s" swiper-animate-delay="3.5s">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page4">
                        <img src="img/text6.png" alt="" class="p41 ani" swiper-animate-effect="rotateInDownRight" swiper-animate-duration="2s" swiper-animate-delay="1s">
                        <img src="img/bg3.gif" alt="" class="p42 ani" swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="2s" swiper-animate-delay="1.5s">
                        <img src="img/head3.png" alt="" class="p43 ani" swiper-animate-effect="rotateInUpRight" swiper-animate-duration="2s" swiper-animate-delay="2s">
                        <img src="img/htext4.png" alt="" class="p44 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="2.5s">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page5">
                        <img src="img/text7.png" alt="" class="p51 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="1s">
                        <img src="img/bg4.gif" alt="" class="p52 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="1.5s">
                        <img src="img/head4.png" alt="" class="p53 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="2s">
                        <img src="img/htext5.png" alt="" class="p54 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="2.5s">
                        <img src="img/htext6.png" alt="" class="p55 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="3s">
                        <img src="img/head3.png" alt="" class="p56 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="3.5s">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page6">
                        <img src="img/text8.png" alt="" class="p61 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="1s">
                        <img src="img/bg5.gif" alt="" class="p62 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="1.5s">
                        <img src="img/head5.png" alt="" class="p63 ani" swiper-animate-effect="rollIn" swiper-animate-duration="2s" swiper-animate-delay="2s">
                        <img src="img/htext7.png" alt="" class="p64 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="2.5s">
                        <img src="img/htext8.png" alt="" class="p65 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="3s">
                        <img src="img/head6.png" alt="" class="p66 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="3.5s">
                        <img src="img/head5.png" alt="" class="p67 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s" swiper-animate-delay="4s">
                        <img src="img/htext9.png" alt="" class="p68 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="4.5s">
                        <img src="img/htext10.png" alt="" class="p69 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="5.5s">
                        <img src="img/head6.png" alt="" class="p60 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="6s">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page7">
                        <img src="img/text9.png" alt="" class="p71 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="1s">
                        <img src="img/bg6.gif" alt="" class="p72 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="1.5s">
                        <img src="img/head7.png" alt="" class="p73 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s" swiper-animate-delay="2s">
                        <img src="img/htext11.png" alt="" class="p74 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="2.5s">
                        <img src="img/htext12.png" alt="" class="p75 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="3s">
                        <img src="img/head6.png" alt="" class="p76 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="3.5s">
                        <img src="img/head7.png" alt="" class="p77 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s" swiper-animate-delay="4s">
                        <img src="img/htext13.png" alt="" class="p78 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="4.5s">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page8">
                        <img src="img/text10.png" alt="" class="p81 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="1s">
                        <img src="img/text11.png" alt="" class="p82 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="1.5s">
                        <img src="img/text12.png" alt="" class="p83 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="2s">
                        <img src="img/bg6.png" alt="" class="p84 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s" swiper-animate-delay="2.5s">
                        <img src="img/text13.png" alt="" class="p85 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="3s">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="page9">
                        <img src="img/text14.png" alt="" class="p91 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="1s">
                        <img src="img/text15.png" alt="" class="p92 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s" swiper-animate-delay="1.5s">
                        <img src="img/text16.png" alt="" class="p93 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="2s">
                        <img src="img/bg7.png" alt="" class="p94 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="2.5s">
                        <img src="img/bg77.png" alt="" class="p95 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="3s">
                    </div>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="first swiper-pagination"></div>
            <!-- 如果需要滚动条 -->
            <!--<div class="swiper-scrollbar"></div>-->
        </div>
        <div class="two swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"></div>
                <div class="swiper-slide"></div>
                <div class="swiper-slide"></div>
                <div class="swiper-slide"></div>
                <div class="swiper-slide"></div>
                <div class="swiper-slide"></div>
                <div class="swiper-slide"></div>
                <div class="swiper-slide"></div>
                <div class="swiper-slide"></div>
            </div>
        <!-- 如果需要分页器 -->
            <div class="second swiper-pagination"></div>
        </div>
    </div>
</body>
</html>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/swiper-3.4.2.min.js"></script>
<script src="js/swiper.animate1.0.2.min.js"></script>
<script src="js/wechat.js"></script>
<script>
    var mySwiper1 = new Swiper ('.one', {
        direction: 'vertical',
        // 如果需要分页器
        pagination: '.first',
        paginationType : 'fraction',
        // 如果需要滚动条
//        scrollbar: '.swiper-scrollbar',
//        scrollbarHide:false,
        onInit: function(mySwiper1){ //Swiper2.x的初始化是onFirstInit
            swiperAnimateCache(mySwiper1); //隐藏动画元素
            swiperAnimate(mySwiper1); //初始化完成开始动画
        },
        onSlideChangeEnd: function(mySwiper1){
            swiperAnimate(mySwiper1); //每个slide切换结束时也运行当前slide动画
        }
    })
    var mySwiper2 = new Swiper ('.two', {
        // 如果需要分页器
        pagination: '.second',
        paginationType : 'progress',
    })
    mySwiper1.params.control = mySwiper2;//需要在Swiper2初始化后，Swiper1控制Swiper2
    mySwiper2.params.control = mySwiper1;//需要在Swiper1初始化后，Swiper2控制Swiper1
</script>